<script setup lang="ts" name="Map">
import { ref, nextTick, onBeforeUnmount, computed } from "vue";
import { ECharts, init, registerMap } from "echarts";
import { useDebounceFn } from "@vueuse/core";
import { get } from "@/api/http";
// import { useEcharts } from "@/hooks/useEcharts";

interface Props {
  height?: number;
  option: any;
}

const props = defineProps<Props>();

const chartHeight = props.height ? props.height + "px" : "300px";

let myChart: ECharts;

const echartRef = ref<HTMLElement>();

const baseUrl = "http://api.ppmark.cn/chart-assets/asset/get/s";

const formatUnit = (e) => {
  if (!e) return "暂无数据";
  const i = e.indexOf("（");
  return e.slice(0, i);
};

nextTick(async () => {
  const { data } = await get("/venue/getList");
  console.log(data);
  venueList.value = data.map((e) => ({
    ...e,
    name: e.venueName,
    value: [e.lat, e.lon],
    basicIntensity: formatUnit(e.basicIntensity),
  }));
  initChart();
});

const venueList = ref([]);
const currentVenue = ref({});
const windowOpacity = ref("none");

const eventOffset = ref([0, 0]);

const windowLeft = computed(() => eventOffset.value[0] - 250 + "px");
const windowTop = computed(() => eventOffset.value[1] - 180 + "px");

const venueSeries = props.option.series.filter((e) => e.name === "亚运场馆")[0];

const initChart = () => {
  if (!myChart) myChart = init(echartRef.value!);

  get(baseUrl + "/data-1600245425326-WX1iJ9mRR.json").catch((geoJson) => {
    registerMap("hanzhou", geoJson);
    myChart.hideLoading();

    const venueSeriesItem = Object.assign(venueSeries, {
      data: venueList.value,
    });
    const series = props.option.series.concat([venueSeriesItem]);
    const option = Object.assign(props.option, { series });
    console.log(option);
    myChart.setOption(option);

    // const GeoCood = myChart.getModel().getSeriesByIndex(3).coordinateSystem;

    // 地图绑定事件
    myChart.on("mouseover", "series.scatter", function ({ data, event }) {
      windowOpacity.value = "grid";

      // console.log(data);
      // const { lat, lon } = data;
      // console.log(GeoCood.dataToPoint([lat, lon]));

      currentVenue.value = data;

      eventOffset.value = [event.offsetX, event.offsetY];
      // console.log(eventOffset.value);
    });
    myChart.on("mouseout", "series.scatter", function ({ data, event }) {
      windowOpacity.value = "none";
    });
    // let index = -1;
    // var timer = setInterval(function () {
    //   // 隐藏提示框
    //   myChart.dispatchAction({
    //     type: "hideTip",
    //     seriesIndex: 0,
    //     dataIndex: index,
    //   });
    //   // 显示提示框
    //   myChart.dispatchAction({
    //     type: "showTip",
    //     seriesIndex: 0,
    //     dataIndex: index + 1,
    //   });
    //   // 取消高亮指定的数据图形
    //   myChart.dispatchAction({
    //     type: "downplay",
    //     seriesIndex: 0,
    //     dataIndex: index,
    //   });
    //   // 高亮指定的数据图形
    //   myChart.dispatchAction({
    //     type: "highlight",
    //     seriesIndex: 0,
    //     dataIndex: index + 1,
    //   });
    //   index++;
    //   if (index > 13) {
    //     index = -1;
    //   }
    // }, 2000);
    // myChart.on("mouseout", function (e) {
    //   clearInterval(timer);
    //   myChart.dispatchAction({
    //     type: "downplay",
    //     seriesIndex: 0,
    //     dataIndex: e.dataIndex,
    //   }); //鼠标移出后先把上次的高亮取消
    //   timer = setInterval(function () {
    //     // 隐藏提示框
    //     myChart.dispatchAction({
    //       type: "hideTip",
    //       seriesIndex: 0,
    //       dataIndex: index,
    //     });
    //     // 显示提示框
    //     myChart.dispatchAction({
    //       type: "showTip",
    //       seriesIndex: 0,
    //       dataIndex: index + 1,
    //     });
    //     // 取消高亮指定的数据图形
    //     myChart.dispatchAction({
    //       type: "downplay",
    //       seriesIndex: 0,
    //       dataIndex: index,
    //     });
    //     // 高亮指定的数据图形
    //     myChart.dispatchAction({
    //       type: "highlight",
    //       seriesIndex: 0,
    //       dataIndex: index + 1,
    //     });
    //     index++;
    //     if (index > 13) {
    //       index = -1;
    //     }
    //   }, 2000);
    // });
  });
};

const columns = [
  {
    label: "场馆名称",
    prop: "venueName",
    // width: 180,
  },
  {
    label: "所属区域",
    prop: "region",
    width: 180,
  },
  {
    label: "总建筑面积",
    prop: "area",
  },
  {
    label: "观众席位",
    prop: "seatNum",
  },
  {
    label: "场地属性",
    prop: "siteAttribute",
  },
  {
    label: "基本设防烈度",
    prop: "basicIntensity",
  },
  // {
  //   label: "场馆设防烈度",
  //   prop: "venueIntensity",
  // },
];

const echartsResize = useDebounceFn(() => {
  myChart && myChart.resize();
}, 100);

window.addEventListener("resize", echartsResize);

onBeforeUnmount(() => {
  window.removeEventListener("resize", echartsResize);
});
defineExpose({
  initChart,
});
</script>

<template>
  <div class="relative">
    <div class="echartDom" ref="echartRef"></div>

    <div class="infoWindow">
      <li
        class="flex-y-center p-l-30px"
        v-for="(item, index) in columns"
        :key="index"
      >
        <span class="w-90px">{{ item.label }}: </span>
        <span>{{ currentVenue[item.prop] || "暂无数据" }}</span>
      </li>
    </div>
  </div>
</template>

<style lang="less" scoped>
div {
  width: 100%;
  height: v-bind(chartHeight);
}
.infoWindow {
  position: absolute;
  left: v-bind(windowLeft);
  top: v-bind(windowTop);
  width: 500px;
  height: 180px;
  border-radius: 10px;
  border: 2px solid rgba(191, 219, 254, 0.9);
  background-color: rgba(4, 50, 109, 0.9);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  // opacity: v-bind(windowOpacity);
  display: v-bind(windowOpacity);
  // &::after {
  //   content: "";
  //   width: 10px;
  //   height: 10px;
  //   background-color: rgba(0, 194, 151, 0.9);
  //   transform: translateX(calc(50% - 5px));
  // }
}
</style>
